<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
   <!--   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  -->   <meta charset=utf-8 name="viewport" content="target-densitydpi=device-dpi" />  
	   

   <title>scripty2 Memory!</title>
   	  <script type="text/javascript" charset="utf-8" src="js/phonegap-1.4.1.js"></script>
   
    <link href="css/memory16.css" media="screen" rel="Stylesheet" type="text/css" />
  </head>
  <body>
  
  <section id="gameStats">
			<p id="timer">
			<a id="gameQuit" class="buttonhelp" href="menu.html">Quit</a>
		    <span class="gameScore"></span></p>
			
	        <p id="reset" ><a id="gamePlay3" class="buttonhelp" 	href="">Help</a></p>
 
<!--      <div id="timer">
	     	Player: 
	    	<span id="player-name"><script type='text/javascript'>document.getElementById('player-name').innerHTML = sessionStorage.getItem('player');</script></span>
	        </div> -->
	</section>
	
	<section id="popupHelp"  style="display:none">
		   
		 <div id="popup-bg"></div>
		 
		 <div id="popup-box">
           Cards are laid out in a grid face down,
		   and players take turns flipping pairs of cards over.
		   On each turn, the player will first turn one card over, 
		   then a second. If the two cards match, 
		   the player scores one point,
		   the two cards are removed from the game, 
		   and the player gets another turn. 
		   If they do not match, the cards are turned back over.

		   

		   </div>
      </section>
    <div id="field">
       <div class="card"><img src="back.png"/></div>
      <div class="card"><img src="back.png"/></div>
      <div class="card"><img src="back.png"/></div>
      <div class="card"><img src="back.png"/></div>
      
      <div class="card"><img src="back.png"/></div>
      <div class="card"><img src="back.png"/></div>
      <div class="card"><img src="back.png"/></div>
      <div class="card"><img src="back.png"/></div>
      
      <div class="card"><img src="back.png"/></div>
      <div class="card"><img src="back.png"/></div>
      <div class="card"><img src="back.png"/></div>
      <div class="card"><img src="back.png"/></div>
      
      <div class="card"><img src="back.png"/></div>
      <div class="card"><img src="back.png"/></div>
      <div class="card"><img src="back.png"/></div>
      <div class="card"><img src="back.png"/></div>      
      <div id="score">0</div>
     <div id="tries">0</div>
    
	
</div> 
    
    <!--<div id="controls">
      <a href="#" onclick="shuffle()">shuffle cards</a><br/>
      <a href="#" onclick="shuffle(3)">shuffle cards (slowly)</a>
    </div>-->
        
	<!-- <script  type="text/javascript" src="jquery-1.6.min.js"></script>
 -->
    <script type="text/javascript" src="js/prototype.s2.min.js"></script>
    <script type="text/javascript" src="js/memory16.js"></script>
 	

  </body>
</html>